import _ from 'lodash';
import cls from 'classnames';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import TableFormView from '../../Assetmanagement/EnterStoreController/mview/TableFormView';
import Cls from 'classnames';
import pageStyles from '@/common/pageLayout.less';
import { OneModal } from '@/components/one-ui';
import { Ref, useRef, useState, useMemo, useEffect } from 'react';
import { IOneModalRef } from '@/pages/type';
import { Button, Spin, message, Steps, Space, Form, Tabs } from 'antd';
import { onCloseModalCommon } from '@/utils';
import { filterTimeProperties } from '@/pages/AssetManage/Acommon';

export const EditAssetLogView: React.FC<any> = ({ rowData, curRes, onClose, type }) => {
  /** 样式根目录 */
  const prefix = 'material-upload-';
  const styleFixCls = 'contract-styfixcls-';

  /** 弹框的ref */
  const uploadModalRefs: Ref<IOneModalRef> = useRef(null);

  /** 引用的form表单 */
  const [assetForm] = Form.useForm();

  /** 页面刷新状态 */
  const [loading, setLoading] = useState<boolean>(false);

  /** 修改前数据 */
  const [beforeData, setBeforeData] = useState<Record<string, any>>({});

  /** 修改后数据 */
  const [afterData, setAfterData] = useState<Record<string, any>>({});

  /** 传给表单的数据 */
  const [currentData, setCurrentData] = useState({ pageType: '', record: {} });

  /** 当前步骤 */
  const [current, setCurrent] = useState<number>(0);

  /** 选择选择资产录入类型 */
  const [assetTypeData, setAssetTypeData] = useState<any>({});

  /** 切换表格 */
  const changeTable = (activeKey: string) => {
    if (activeKey === 'before') {
      /** 修改前 */
      setCurrentData({
        pageType: type,
        record: beforeData,
      });
    } else {
      /** 修改后 */
      setCurrentData({
        pageType: type,
        record: afterData,
      });
    }
  };

  /** 修改页面刷新状态 */
  const changeLoading = (flag: boolean) => {
    setLoading(flag);
  };

  useEffect(() => {
    let beforeFormInfo = filterTimeProperties(rowData.beforeJson);
    let afterFormInfo = filterTimeProperties(rowData.operParam);
    // 单位会计科目默认显示 固定资产
    beforeFormInfo.ledgerAccount = '100124441000';
    beforeFormInfo.assetState = '100124031000';
    afterFormInfo.ledgerAccount = '100124441000';
    afterFormInfo.assetState = '100124031000';
    setBeforeData(beforeFormInfo);
    setAfterData(afterFormInfo);
    setCurrentData({
      pageType: type,
      record: beforeFormInfo,
    });
  }, [type, rowData]);

  /** 底部按钮 */
  const footerModal = useMemo(() => {
    return (
      <div className={cls(prefix + 'footer')}>
        <Space>
          <Button
            key="back"
            onClick={() => {
              onCloseModalCommon(uploadModalRefs);
            }}
          >
            关闭
          </Button>
        </Space>
      </div>
    );
  }, [curRes, current, assetTypeData]);

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={uploadModalRefs}
        title={'资产修改历史'}
        onCancel={onClose}
        onOk={onClose}
        footer={footerModal}
        width={document.body.clientWidth * 0.85}
        bodyStyle={{
          height: document.body.clientHeight * 0.75,
          padding: '5px 10px',
        }}
        centered
      >
        <Spin spinning={loading}>
          <div className={'material-upload'}>
            <div className={cls(prefix + 'content')} style={{ height: '100%', paddingBottom: '20px' }}>
              <Tabs
                className={pageStyles['commonTabs']}
                type="card"
                onChange={(activeKey: string) => {
                  changeTable(activeKey);
                }}
                items={[
                  {
                    label: '修改前',
                    key: 'before',
                    children: (
                      <>
                        <div className="commonTabsBodyDom">
                          <div className={Cls('tabsBodyInfoDom', `${styleFixCls}updateFormBox`)}>
                            <ScrollBarLayout>
                              <TableFormView
                                formName={assetForm}
                                locationProps={currentData}
                                currentType={rowData.tempSelectType}
                                changeLoading={changeLoading}
                              />
                            </ScrollBarLayout>
                          </div>
                        </div>
                      </>
                    ),
                  },
                  {
                    label: '修改后',
                    key: 'later',
                    children: (
                      <>
                        <div className="commonTabsBodyDom">
                          <div className={Cls('tabsBodyInfoDom', `${styleFixCls}updateFormBox`)}>
                            <ScrollBarLayout>
                              <TableFormView
                                formName={assetForm}
                                locationProps={currentData}
                                currentType={rowData.tempSelectType}
                                changeLoading={changeLoading}
                              />
                            </ScrollBarLayout>
                          </div>
                        </div>
                      </>
                    ),
                  },
                ]}
                destroyInactiveTabPane={true}
              />
            </div>
          </div>
        </Spin>
      </OneModal>
    </>
  );
};
